import { Select } from 'antd';
import { getChannelsApi } from 'api/channel';
import React, { useEffect, useState } from 'react';

const { Option } = Select;

export default function Channel(props) {
  // 获取频道数据
  const [channels, setChannels] = useState([]);
  const getChannelsList = async () => {
    const res = await getChannelsApi();
    setChannels(res.data.channels);
  };

  useEffect(() => {
    // 获取频道数据
    getChannelsList();
  }, []);

  return (
    // 把 vlaue 跟 onChange 丢回父组件里，这样才能接收到
    // 这里把整个props丢过去
    <Select placeholder="请选择频道" style={{ width: 200 }} {...props}>
      {channels.map((item) => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
}
